<template>
    <div>
        <!--查询区域-->
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="工作包">
                        <el-input v-model="formInline.packageCode" size="mini" placeholder="工作包"></el-input>
                    </el-form-item>
                    <el-form-item label="架次">
                        <el-input v-model="formInline.startPlaneNo" size="mini" placeholder="架次"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" @click="queryUnpackPackage">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <!--列表区域-->
        <el-row>
            <div style="margin-bottom:3px">
                <el-button size="mini" type="primary" @click="callPalletCode">拆包叫箱</el-button>
            </div>
            <el-col :span="24">
                <!--装盘的工作包-->
                <el-table :data="unPackages.tableData" @selection-change="unpackHandleSelectionChange" height="350" row-key="id" border lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column  type="selection" width="55"></el-table-column>
                    <el-table-column  prop="packageCode" label="工作包编号" width="180" show-overflow-tooltip></el-table-column>
                    <el-table-column  prop="startPlaneNo" label="架次" width="60"></el-table-column>
                    <el-table-column  prop="aoCode" label="AO号" width="180" show-overflow-tooltip></el-table-column>
                    <el-table-column  prop="itemCode" label="图号" width="180" show-overflow-tooltip></el-table-column>
                    <el-table-column  prop="qualityCode" label="质量编号" width="180" show-overflow-tooltip></el-table-column>
                    <el-table-column  prop="packageCount" label="分拣数量"></el-table-column>
                    <el-table-column  prop="itemQty" label="需求数量"></el-table-column>
                    <el-table-column  prop="palletCode" label="托盘号"></el-table-column>
                    <el-table-column  prop="sortingStatus" label="分拣状态"  show-overflow-tooltip></el-table-column>
                </el-table>
                <el-pagination @size-change="unpackHandleSizeChange" @current-change="unpackHandleCurrentChange" :current-page.sync="unPackages.page.currentPage" 
                    :page-sizes="[200, 300, 400]" :page-size="unPackages.page.pageSize" layout="total,sizes, prev, pager, next" :total="unPackages.page.total">
                </el-pagination>
            </el-col>
        </el-row>
        <el-row>
            <!--输入框  1：箱子，2：托盘-->
            <!--输入框，按钮(保存)-->
            <el-form :inline="true" :model="formInline2" class="demo-form-inline">
                <el-form-item label="条码">
                    <el-input v-model="formInline2.palletCode" size="mini" placeholder="" @keydown.enter.native="addByEnterKey"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="saveEditMaterialInfo">保存</el-button>
                </el-form-item>
            </el-form>
            <el-col :span="17">
                <span>托盘:{{ toolCode }}</span>
                <!--要拆包物料： 工作包编码，ao编号，架次，图号(itemCode)，拆包数量（input），分拣数量，配套数量,需求数量-->
                <div class="grid-content bg-purple">
                    <el-table  size="mini"  :data="toolTableData"  style="width: 100%"  height="250" highlight-current-row
                        @cell-click="tabClick" :row-class-name="tableRowClassName">
                        <el-table-column type="index" label="序号" width="50"> </el-table-column>
                        <el-table-column prop="packageCode" label="工作包编码" width="150" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="aoCode" label="AO编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="startPlaneNo" label="架次" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="itemCode" label="图号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="qualityCode" label="质量编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="unpackQty" label="拆包数量" width="70" :show-overflow-tooltip="true"> 
                            <template slot="header">
                                <span style="color: rgb(103, 194, 58)">拆包数量</span>
                            </template>
                            <template slot-scope="scope">
                                <span v-if="
                                scope.row.index === tabClickIndex &&
                                tabClickLabel === '拆包数量'
                                ">
                                <el-input v-model="scope.row.unpackQty" placeholder="拆包数量" @blur="inputBlur(scope.row)" oninput="value=value.replace(/[^0-9.]/g,'')"
                                    size="mini"></el-input>
                                </span>
                                <span v-else>{{ scope.row.unpackQty }}</span>
                            </template>
                        </el-table-column>
                        
                        <el-table-column prop="packageCount" label="分拣数量" width="70" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="matchQty" label="配套数量" width="70" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="itemQty" label="需求数量" width="70" :show-overflow-tooltip="true"> </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="7" style="padding-left: 10px;">
                <span>箱号:{{ workbinCode }}</span>
                 <!--要拆包物料： 图号(itemCode)，当前库存数量-->
                 <div class="grid-content bg-purple">
                    <el-table size="mini" :data="workbinTableData" style="width: 100%" height="250" highlight-current-row>
                        <el-table-column type="index" label="序号" width="50"> </el-table-column>
                        <el-table-column prop="itemCode" label="图号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                        <el-table-column prop="itemQty" label="当前库存数量" width="130" :show-overflow-tooltip="true"> </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import request from '@/utils/request.js';
export default {
    name:"",
    data(){
        return {
            formInline:{
                packageCode:"",
                startPlaneNo:""
            },
            unPackages:{
                tableData:[],
                page:{
                    currentPage:1,
                    pageSize:20,
                    total:0
                },
                selectData:[]
            },
            workbinCode:"",
            toolCode:"",
            workbinTableData:[],
            toolTableData:[],
            formInline2:{
                palletCode:""
            },
            page:{
                currentPage:1,
                pageSize:100,
                total:0
            },
            tabClickIndex: '',
            tabClickLabel: '',
            scanHcxOper:false,
            scanGzbOper:false,//重复扫码工作包回库
            scanMaterialOper:false,//重复扫码工作包回库
        }
    },
    methods:{
        load(tree, treeNode, resolve){
            console.log("tree",tree);
            console.log("treeNode",treeNode);
            if(tree.treeType=="package"){
                request.post("/packageUnpackRest/queryAoByPackage",{"msTaskPackageId":tree.msTaskPackageId}).then((res)=>{
                    console.log("res",res)
                    resolve(res.data);
                })
            }else{
                resolve(tree.children);
            }
        },
        queryUnpackPackage(){//查询缺包的工作包
            var that = this;
            request.post("/packageUnpackRest/queryPackageTask",{"page":this.unPackages.page,"searchParams":this.formInline}).then((res)=>{
                console.log("res.data.retData",res);
                this.unPackages.tableData = res.data.list;
                this.unPackages.page.total = res.data.total;
            });
        },
        callPalletCode(){
            if(this.unPackages.selectData.length==0){
                this.$Alert({type:"error",message:"请勾选一条记录",title:"错误"});
                return;
            }
            request.post("/packageUnpackRest/callUnpackPalletCode",this.unPackages.selectData).then((res)=>{
                console.log("res1111",res);
                if(res.data.retCode=="200"){
                    this.$Alert({title:"成功",message:res.data.message,type:"success"});
                }else{
                    this.$Alert({title:"失败",message:res.data.message,type:"error"});
                }
            });
        },
        unpackHandleSelectionChange(val){
            this.unPackages.selectData = val;
            console.log("selectData",this.unPackages.selectData);
        },
        unpackHandleSizeChange(val){
            this.unPackages.page.pageSize = val;
        },
        unpackHandleCurrentChange(val){
            this.unPackages.page.currentPage = val;
        },
        addByEnterKey(e) {
            //Enter键的代码就是13
            if (e.keyCode == 13) {
                this.$options.methods.scan.bind(this)();
            }
        },
        scan(){
            if(this.formInline2.palletCode=="9004"){
                this.scanGzbOper = false;
                this.$options.methods.toolBack.bind(this)();
            }else if(this.formInline2.palletCode=="9002"){
                this.scanHcxOper = false;
                this.$options.methods.workbinBack.bind(this)();
            }
            else{
                this.queryBarCode();
            }
        },
        queryBarCode(){//查询缓存箱子，托盘列表
            var that = this;
            if(this.formInline2.palletCode.startsWith("11208003")){
                this.workbinCode = this.formInline2.palletCode;
            }else if(this.formInline2.palletCode.startsWith("21208003")){
                this.toolCode = this.formInline2.palletCode;
            }
            var workbinFlag = this.workbinCode.startsWith("1");
            var toolFlag = this.toolCode.startsWith("2");
            if (workbinFlag == true) {
                //调用箱子接口
                console.log("箱子")
                request.post("/packageUnpackRest/queryPalletCodeMaterial",{"page":this.page,"searchParams":{"palletCode":this.formInline2.palletCode}}).then((res)=>{
                    console.log(res);
                    that.workbinTableData = res.data.list;
                    that.page.total = res.data.total;
                });
            }
            if(toolFlag == true){
                //调用托盘接口
                console.log("托盘")
                request.post("/packageUnpackRest/queryPalletCodeMaterial",{"page":this.page,"searchParams":{"palletCode":this.formInline2.palletCode}}).then((res)=>{
                    console.log(res);
                    that.toolTableData = res.data.list;
                    that.page.total = res.data.total;
                });
            }
            //重制条码框的值
            this.formInline2.palletCode = "";
        },
        //缓存箱回库操作
        workbinBack(){
            if(this.workbinCode==""){
                this.$Alert({title: "失败", message: "请先扫缓存箱条码！",type: "error"});
                return ;
            }
            if(this.scanHcxOper){
                this.$Alert({title: "失败", message: "请不要重复扫缓存箱回库",type: "error"});
                return ;
            }
            //托盘扫码接口
            request.post("/inStoreroom/sortStoreRoomIn",{workbinCode:this.workbinCode}).then((res)=>{
               console.log("res",res);
               if(res.data.retCode=='200'){
                    //页面缓存箱编码
                    this.workbinCode = '';
                    this.scanHcxOper=true;
                    // this.hcxinfos=[];
                    this.$Alert({
                    title: "成功",message: res.data.message,type: "success"
                    })
                }else{
                    this.$Alert({
                    title: "失败",message: res.data.message,type: "error",
                    })
                }
                this.formInline2.palletCode = "";
            });  
            
        },//工作包回库
        toolBack(){
            if(this.toolCode==""){
                this.$Alert({title: "失败", message: "请先扫工作包条码！",type: "error"});
                return ;
            }
            if(this.scanGzbOper){
                this.$Alert({title: "失败", message: "请不要重复扫托盘回库",type: "error"});
                return ;
            }
            //托盘扫码接口
            request.post("/msTaskPackage/taskIn",{palletCode:this.toolCode}).then((res)=>{
               console.log("res",res);
               if(res.data.retCode=='200'){
                    //页面托盘编码
                    this.toolCode = '';
                    this.scanGzbOper=true;
                    // this.scanMaterialBoxss=[];
                    this.$Alert({
                    title: "成功",message: res.data.message,type: "success"
                    })
                }else{
                    this.$Alert({
                    title: "失败",message: res.data.message,type: "error",
                    })
                }
                this.formInline2.palletCode = "";
            });  
            
        },
        //保存编辑后的拆包数量
        saveEditMaterialInfo(){
            var tools = [];
            for(var i=0;i<this.toolTableData.length;i++){
                if(this.toolTableData[i].unpackQty>this.toolTableData[i].packageCount){
                    this.$Alert({type:"error",message:"拆包数量不能大于分拣数量!",title:"错误"});
                    return ;
                }
                if(this.toolTableData[i].unpackQty>0){
                    tools.push(this.toolTableData[i]);
                }
            }
            request.post("/packageUnpackRest/saveUnpackData",{"matchinfos":this.toolTableData,"workbinCode":this.workbinCode,"toolCode":this.toolCode})
                .then((res)=>{
                    if(res.data.retCode=="200"){
                        this.$Alert({type:"success",message:res.data.message,title:"成功"});
                        this.$options.methods.queryBarCode.bind(this)();
                    }else{
                        this.$Alert({type:"error",message:res.data.message,title:"错误"});
                    }

                });
            
        },
        tabClick(row, column, cell, event) {
            switch (column.label) {
                case "序号":break;
                case "工作包编码":break;
                case "AO编号":break;
                case "架次":break;
                case "图号":break;
                case "拆包数量":
                this.tabClickIndex = row.index;
                this.tabClickLabel = column.label;break;
                case "分拣数量":break;
                case "配套数量":break;
                case "需求数量":break;
                default:
                return;
            }
        },
        // 失去焦点初始化
        inputBlur(item) {
            this.tabClickIndex = null;
            this.tabClickLabel = "";
        },
        tableRowClassName({ row, rowIndex }) {
            // 把每一行的索引放进row
            row.index = rowIndex;
        },
    },
    mounted(){
        this.$options.methods.queryUnpackPackage.bind(this)();
    }
}
</script>